<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="规则设定" :visible.sync="dialogVisible" @close="resetForm()" width="880px">
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="com_tab_box flexbox flexcenter">
                <div class="com_tab_item" :class="{'active':types==1}" @click="selectType(1)">高成本素材</div>
                <div class="com_tab_item" :class="{'active':types==2}" @click="selectType(2)">掉量素材</div>
            </div>
            <div class="rules_box" v-if="types==1" key="tall">
                <div class="rules_item">
                    <span class="font_14 color_01">素材累计消耗大于</span>
                    <el-input v-model="tallForm.cost" placeholder="请输入消耗" class="ml_9" size="small" style="width:140px">
                        <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                    </el-input>
                    <span class="font_14 color_01 ml_9">ROI 小于</span>
                    <el-input v-model="tallForm.roi" placeholder="请输入ROI" size="small" style="width:140px" class="ml_9">
                    </el-input>
                </div>
                <div class="rules_item">
                    <span class="font_14 color_01">素材连续三天ROI 小于</span>
                    <el-input v-model="tallForm.three_roi" placeholder="请输入ROI" size="small" style="width:140px" class="ml_9">
                    </el-input>
                </div>
            </div>
            <div class="rules_box" v-if="types==2" key="fall">
                <div class="rules_item">
                    <span class="font_14 color_01">近</span>
                    <el-input v-model="fallForm.day" placeholder="请输入天数" class="ml_9" size="small" style="width:140px">
                        <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">天</i>
                    </el-input>
                    <span class="font_14 color_01 ml_9">峰值单日消耗大于</span>
                    <el-input v-model="fallForm.cost_max" placeholder="请输入消耗" class="ml_9" size="small" style="width:140px">
                        <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                    </el-input>
                    <span class="font_14 color_01 ml_9">当日消耗低于</span>
                    <el-input v-model="fallForm.cost_min" placeholder="请输入消耗" size="small" style="width:140px" class="ml_9">
                        <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                    </el-input>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" :disabled="loading" :loading="loading" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            types: 1,
            tallForm: {
                three_roi: "",
                cost: "",
                roi: "",
            },
            fallForm: {
                cost_max: "",
                cost_min: "",
                day: "",
            },
        };
    },
    created() {},
    methods: {
        selectType(type) {
            this.types = type;
        },
        getData(type) {
            this.types = type;
            this.dialogVisible = true;
            this.getRules();
        },
        async getRules() {
            this.loading = true
            const { data: res } = await this.$http.post(
                "adminapi/materialv2/ruleSetPage"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                this.loading = false;
                return;
            } else {
                this.loading = false;
                this.tallForm = res.data.tall;
                this.fallForm = res.data.fall;
            }
        },
        // 提交添加
        async submitForm() {
            if (this.types == 1) {
                var { data: res } = await this.$http.post(
                    "adminapi/material/materialTall",
                    {
                        accumulate: this.tallForm,
                    }
                );
            } else {
                var { data: res } = await this.$http.post(
                    "adminapi/materialv2/materialFall",
                    {
                        fallset: this.fallForm,
                    }
                );
            }
            this.loading = true
            if (res.code !== 200) {
                this.$message.error(res.msg);
                this.loading = false;
                return;
            } else {
                this.$message({
                    message: "保存成功",
                    type: "success",
                });
                this.loading = false;
                this.resetForm();
                this.$emit("getDataList", 1);
            }
        },

        resetForm() {
            this.dialogVisible = false;
            this.tallForm = {
                three_roi: "",
                cost: "",
                roi: "",
            }
            this.fallForm = {
                cost_max: "",
                cost_min: "",
                day: "",
            }
        },
    },
    components: {},
};
</script>


<style scoped>
.com_tab_box {
    margin-top: -20px;
}
.com_tab_item {
    height: 54px;
    line-height: 54px;
}
.rules_box {
    border: 1px solid #ebebeb;
    border-radius: 6px;
    padding: 8px 20px;
    margin-top: 20px;
}
.rules_item {
    border-bottom: 1px solid #ebebeb;
    padding: 12px 0;
    line-height: 32px;
}
.rules_item:last-child {
    border-bottom: 0;
}
.ml_9 {
    margin-left: 9px;
}
</style>
